﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>输出Table演示</title>
    <script type="text/javascript" src="/WF/Scripts/bootstrap/js/jquery.min.js"></script>
    <script src="/WF/Scripts/QueryString.js" type="text/javascript"></script>
    <link href="/DataUser/Style/ccbpm.css" rel="stylesheet" type="text/css" />
    <!-- 引用通用的js文件. -->
    <script type="text/javascript" src="/WF/Scripts/config.js"></script>
    <script type="text/javascript" src="/WF/Comm/Gener.js"></script>
    <script type="text/javascript" language="javascript">

        //页面启动函数.
        $(function () {

            //加载表单字段。
            var groups = new Entities("BP.Port.Depts");
            groups.RetrieveAll();

            //加载表单字段。
            var ens = new Entities("BP.Port.Emps");
            ens.RetrieveAll();

            var cols = 5; //列数.
            var sortField = "FK_Dept"; //关联字段.
            var html = "<table style='width:100%;' >";

            //遍历分组.
            for (var iGroup = 0; iGroup < groups.length; iGroup++) {
                var group = groups[iGroup];

                //判断该类别下的实体是否存在? 如果不存在就不输出.
                if (IsHaveEns(ens, group.No,sortField) == false)
                    continue;

                html += "<tr>";
                html += "<th colspan=" + cols + ">" + group.Name + "</th>";
                html += "</tr>";

                var colIdx = -1; //定义顺序号.
                for (var i = 0; i < ens.length; i++) {
                    var en = ens[i]; //获得子集.

                    if (en[sortField] != group.No)
                        continue; //过滤.

                    colIdx++;
                    if (colIdx == 0)
                        html += "<tr>";


                    html += "<td>" + en.Name + "</td>";

                    if (colIdx == cols - 1) {
                        html += "</tr>";
                        colIdx = -1;
                    }
                }

                //补全:处理输出余下的部分.
                if (colIdx != -1) {
                    while (true) {
                        html += "<td></td>";
                        colIdx++;
                        if (colIdx == cols - 1)
                            html += "</tr>";
                        break;
                    }
                }
            }

            html += "</table>";

            if ($("#docs") == null)
            {
                alert('没有找到标签id=docs的 div.');
            }

            $("#docs").append(html);
        });

        //是否包含.
        function IsHaveEns(ens, groupNo,sortField)
        {
            for (var myidx = 0; myidx < ens.length; myidx++) {
                var en = ens[myidx];
                if (en[sortField] == groupNo)
                    return true;
            }
            return false;
        }

    </script>
</head>
<body>

    <h3>矩阵输出...</h3>

    <div id="docs"></div>


</body>
</html>
